<template>
  <div>
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img src="../assets/1.jpg" style="width:36px;height:36px;border-radius:50%;">
        </div>
        <a-menu
          theme="dark"
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['1','1-1']"
          @click="onClickChangeRouter"
        >
          <a-sub-menu key="1">
            <span slot="title"><a-icon type="user" />基础管理</span>
            <a-menu-item key="1-1">
              <a-icon type="user" />
              <span>商品管理</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="2">
            <span slot="title"><a-icon type="user" />订单管理</span>
            <a-menu-item key="2-1">
              <a-icon type="user" />
              <span>交易订单</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="3">
            <span slot="title"><a-icon type="user" />系统管理</span>
            <a-menu-item key="3-1">
              <a-icon type="user" />
              <span>用户管理</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="4">
            <span slot="title"><a-icon type="user" />支付管理</span>
            <a-menu-item key="4-1">
              <a-icon type="user" />
              <span>支付配置信息</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <div class="home_header">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
            <a-button type="primary" @click="onClickBack"> 退出登录 </a-button>
          </div>
        </a-layout-header>
        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    onClickChangeRouter(item) {
      //点击跳转对应的页面
      // console.log(item);
      var path = "";
      switch (item.key) {
        case "1-1":
          path = "/";
          break;
        case "2-1":
          path = "/trading";
          break;
        case "3-1":
          path = "/user";
          break;
        case "4-1":
          path = "/payment";
          break;
      }
      this.$router.push(path);
    },
    onClickBack(){//点击退出登录
      localStorage.removeItem("token");
      this.$router.push("/login");
    }
  },
};
</script>
<style lang="scss" scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  // line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.logo {
  width: 100%;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  img {
    width: 50%;
    height: 80%;
  }
}
.home_header{
  width: 95%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

</style>
